<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/classify.css">
</head>
<body>
    <div id="warp">
        <div class="parcel">
            <header>
                <span class="left"><img src="../../image/back.png" alt=""></span>
                <span class="unset">附近兼职</span>
            </header>
            <div class="classify">
                <span>
                    <a>岗位</a><img src="../../image/xiasanjiao.png" alt="">
                </span>
                <span>
                    <a>位置</a><img src="../../image/xiasanjiao.png" alt="">
                </span>
                <span>
                    <a>附近</a><img src="../../image/xiasanjiao.png" alt="">
                </span>
            </div>
        </div>
        <div id="shade">
            <div class="shade-classify clearfix">
                <ul class="clearfix ul1">
                    <li>软件</li>
                    <li>仓库</li>
                    <li>行政</li>
                    <li>运营</li>
                    <li>促销</li>
                    <li>实习</li>
                    <li>导购</li>
                    <li>传单</li>
                    <li>礼仪</li>
                    <li>教育</li>
                    <li>助理</li>
                    <li>其他</li>
                </ul>
                <ul class="clearfix ul3">
                    <li>静安</li>
                    <li>黄浦</li>
                    <li>浦东</li>
                    <li>徐汇</li>
                    <li>闸北</li>
                    <li>闵行</li>
                    <li>青浦</li>
                    <li>杨浦</li>
                    <li>宝山</li>
                    <li>虹口</li>
                    <li>长宁</li>
                    <li>卢湾</li>
                    <li>松江</li>
                    <li>崇明</li>
                    <li>嘉定</li>
                    <li>不限</li>
                </ul>
                <ul class="clearfix ul2">
                    <li>热门兼职</li>
                    <li>最新兼职</li>
                    <li>周末兼职</li>
                    <li>附近兼职</li>
                </ul>
            </div>
        </div>
        <div id="work-list">
            <ul>
                <li>
                    <div class="logo">
                     
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk1">
                       
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk5">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk2">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk1">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk4">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk2">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk4">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk5">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk1">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk4">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk2">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p></p>
                    </div>
                    
                </li>
                <li>
                    <div class="logo bk4">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <li>
                    <div class="logo bk5">
                        
                    </div>
                    <div class="center">
                        <p></p>
                        <p><span class="color"></span></p>
                    </div>
                    <div class="right">
                        <span class="small"></span>
                        <p><img src="" alt=""></p>
                    </div>
                </li>
                <p class="over">没有对应的任务</p>
            </ul>
        </div>
        
    </div>
    <script src="../../js/jquery-3.4.1.min.js"></script>
    <script src="../../js/htmlFont.sizeRoot.js"></script>
    <script src="../../js/public.js"></script>
    <script>
    window.onload = function(){
        //ajax获取json数据
        getCookie('work');
        function getCookie(name) {
            var message = document.cookie.split(';')
            var reg = new RegExp('^' + name + '')
            var arr = []
            la:
            for (var i = 0; i < message.length; i++) {
                arr[i] = message[i].split('=')
                for (var y = 0; y < arr.length; y++) {
                    if (arr[y][0].trim() == name.trim()) {
                        arr = arr[y][1]
                        break la
                    }
                }
            }
            $('.classify>span:last-child>a').text(arr)
            $('header>.unset').text(arr)
            console.log(arr)
           
        }
        !(function(){
            var $center = $('#work-list .center p:first-child')
            var jsonData = Fun.getJson("logo.json");
            var $color = $('#work-list .center .color')
            var $last = $('#work-list .center p:last-child')
            var $logo = $('#work-list .logo')
            for (let i = 0; i < $center.length; i++) {
                $center[i].innerHTML = jsonData.name[i % jsonData.name.length]
                $last[i].innerHTML = '<span class="color">' + "￥" + jsonData.monay[i % jsonData.name.length] + '</span> /天'
            }
            var logo = jsonData.logo
            for (let i = 0; i < logo.length; i++) {
                for (let j = 0; j < $center.length; j++) {
                    if ($center[j].innerText.indexOf(logo[i]) >= 0) {
                        $logo[j].innerHTML = logo[i]
                    }
                }
            }
            for(let i =0;i<$logo.length;i++){
                switch($logo[i].innerHTML){
                    case "仓库":$logo[i].className = 'logo bk2'
                    break
                    case "实习": $logo[i].className = 'logo bk1'
                        break
                        case "促销": $logo[i].className = 'logo'
                        break
                        case "婚庆": $logo[i].className = 'logo bk5'
                        break
                }
            }
        })()
        ajax()
        function ajax() {
            var obj = null
            var xml = new XMLHttpRequest();
            xml.open('GET', '../../data/classfir.json');
            xml.send();
            xml.onreadystatechange = function () {
                if (xml.readyState == 4) {
                    if (xml.status == 200 || xml.status == 304) {
                        obj = xml.responseText
                        obj = JSON.parse(obj)
                        // if(unset)
                        // for(var i =0;i< $('#work-list li>.right>p').length;i++){
                        //      $('#work-list li>.right>p')[i].innerText = obj.hot[i%obj.hot.length]
                        // }
                        var classify = $('.classify>span:last-child>a').text();
                        console.log(classify)
                        switch (classify) {
                            case '附近兼职':
                                for (var j = 0; j < $('#work-list li>.right>p').length; j++) {
                                    $('#work-list .small')[j].innerText = ''
                                    $('#work-list li>.right>p')[j].innerHTML = '<img src="' + obj.img + '">' + obj.gps[j % obj.gps.length] + 'km'
                                }
                                break
                            case '热门兼职':
                                for (var i = 0; i < $('#work-list li>.right>p').length; i++) {
                                    $('#work-list li>.right>p')[i].innerText = obj.hot[i % obj.hot.length]
                                    $('#work-list .small')[i].innerText = obj.affirm
                                }
                                break
                            case '周末兼职':
                                for(var i =0;i<$('#work-list li>.right>p').length; i++){
                                    $('#work-list li>.right>p')[i].innerHTML = obj.hot[i % obj.hot.length]
                                    $('#work-list .small')[i].innerText = ''
                                }
                                break
                            case '最新兼职':
                                for (var i = 0; i < $('#work-list li>.right>p').length; i++) {
                                    $('#work-list li>.right>p')[i].innerHTML = new Date().getMonth()+1+'-'+ new Date().getDate()
                                    $('#work-list .small')[i].innerText = ''
                                }
                                break
                        }
                    }
                }
            }
        }

        //返回上一个页面
        var back = document.querySelector('header .left')
        back.addEventListener('click',function(){
            window.history.back()
        })
        var $gpsLi 
        //点击分类出现二级菜单
        var $classify = $('.classify>span')
        !(function(){
            var $ul = $('#shade ul')
            var index = 0
            var unset = $('header>.unset').text()

            $classify.on('click', function (e) {
                 $gpsLi = $('#work-list li:visible')
                $('#shade').css('display', 'block')
                $ul[index].style.display = 'none'
                if ($(this).index() == 2) {
                    var $parent = $(this).children('a')
                    $ul[$(this).index()].style.display = 'flex'
                    $($ul[$(this).index()]).children().on('touchstart',function(){
                        $parent.text($(this).text())
                       $('header>.unset').text($(this).text())
                       ajax()
                    })
                    $('header>.unset').text($(this).text())
                } else {
                    $ul[$(this).index()].style.display = 'flex'
                }
                index = $(this).index()
                e.stopPropagation()
            })
            $('body').on('click', function () {
                $('#shade').css('display', 'none')
            })
        })()
        //岗位筛选
        var $over = $('.over')
        // var $list = $('#shade ul:first-child>li:not(:last)')
        var $list = $('#shade ul:first-child>li:not(:last)')
        var $listLogo = $('#work-list li>.logo')
        var $ulList = $('#work-list li')
        //位置筛选的条件
        console.log($ulList)
        let $gpsList = $('#shade .ul3>li:not(:last)')
        let $gps = $('#work-list li>.right>p')

        $list.on('click',post)
        function post() {
            var boole = true
            var html = this.innerText
            $ulList.css('display', 'flex')
            $($classify[0]).children('a').text(html)
            $over.css('display', 'none')
            if ($classify[1].innerText === '位置') {
                console.log('123')
                for (let i = 0; i < $ulList.length; i++) {
                    if ($listLogo[i].innerText !== $($classify[0]).children('a').text()) {
                        $($ulList[i]).css('display', 'none')
                    } else {
                        boole = false
                    }
                }
            } else {
                console.log('234')
                for (let i = 0; i < $ulList.length; i++) {
                    if ($listLogo[i].innerText === $($classify[0]).children('a').text() && $gps[i].innerText.indexOf($($classify[1]).children('a').text()) >= 0) {
                        boole = false
                    } else {
                        $($ulList[i]).css('display', 'none')
                    }
                }
            }
            if (boole) {
                $over.css('display', 'block')
            }
        }
        //位置筛选
        $gpsList.on('click', gpsfn)
        function gpsfn() {
            var boole = true
            var html = this.innerText
            $listLogo.parent().css('display', 'flex')
            $($classify[1]).children('a').text(html)
            $over.css('display', 'none')
            if ($classify[0].innerText === '岗位') {
                console.log('123')
                for (let i = 0; i < $ulList.length; i++) {
                    // console.log($gps[i].innerText)
                    if ($gps[i].innerText.indexOf($($classify[1]).children('a').text()) < 0) {
                        $($ulList[i]).css('display', 'none')
                    } else {
                        boole = false
                    }
                }
            } else {
                console.log('234')
                for (let i = 0; i < $ulList.length; i++) {
                    if ($listLogo[i].innerText === $($classify[0]).children('a').text() && $gps[i].innerText.indexOf($($classify[1]).children('a').text()) >= 0) {
                        boole = false

                    } else {
                        $($ulList[i]).css('display', 'none')

                    }
                }
            }
            if (boole) {
                $over.css('display', 'block')
            }
        }
        function nb(){
            if($classify[0].innerText === '岗位' && $classify[1].innerText === '位置'){
                $ulList.css('display', 'flex')
                $over.css('display', 'none')
            }
        }
        //当点击其他时候，让全部的li为显示状态，隐藏没有对应的任务时的p标签
        var $last = $('#shade ul:first-child>li').last()
        $last.on('click', function () {
            $over.css('display', 'none')
            $($classify[0]).children('a').text('岗位')
            $listLogo.parent().css('display', 'flex')
            gpsfn()
            nb()

        })
        let $ul3Last = $('#shade .ul3>li').last()
        $($ul3Last).on('click',function(){
            $over.css('display', 'none')
            $($classify[1]).children('a').text('位置')
            $listLogo.parent().css('display', 'flex')
            post()
            nb()

        })

        //职位详情
        $("#work-list li").click(function () {
            window.open("particulars.html", "_self");
            // 
            var name = $(this).children('.center').children(':first(p)').text()
            var residue = $(this).children('.right').children(':last()').text()
            var money = $(this).children('.center').children(':last(p)').text()
            // var quantity = $(this).parent().children('.right').children('p').children('span').text()
            console.log(name, residue, money)
            var obj = {
                "message": name,
                "money": money,
                "residue": residue
                // "quantity": quantity
            }
            obj = JSON.stringify(obj)
            document.cookie = 'index=' + obj + ';expires =' + new Date(new Date + 7);
            // 
        })
    }
    </script>
</body>
</html>